import { useEffect, useState } from "react";
import axios from "../../axios";
import "../../assets/css/Console.scss"
import { Col, Flex, Row, Divider, Badge, Radio, Tabs, Button, DatePicker } from 'antd';
import AutoChart from "../../components/AutoChart"

const { RangePicker } = DatePicker;


function Console() {
    // 销售额  用户访问  订单量  新增用户  请求——————————————————————
    const getsales = async () => {
        localStorage.getItem("token")
        let res = await axios.get("/statistics/trade/data", {
            params: {
                temp: new Date().getTime()
            }
        })
        // console.log(res);
        setsales(res)
    }
    const [sales, setsales] = useState({})
    const [operating, setoperating] = useState({})
    // 经营数据开始了------------------------------
    const getoperating = async () => {
        let res = await axios.get("/statistics/home/operating/data", {
            params: {
                temp: new Date().getTime()
            }
        })
        setoperating(res)
    }

    // 订单统计 开始了***************************************
    const [day, setDay] = useState('yesterday');//天数切换效果

    const [dayobj, setDayobj] = useState({})

    const getStatistics = async (dateLimit) => {
        let res = await axios.get("/statistics/trade/overview", {
            params: {
                dateLimit,
                temp: new Date().getTime()
            }
        })
        console.log(res);
        setDayobj(res)
    }
    const onChange = (e) => {

        setDay(e.target.value);

        getStatistics(e.target.value)
    };
    const [placement, setPlacement] = useState('');
    const onChangetime = (e) => {
        if (!e) {
            setPlacement("")
            return false
        }
        const startTime = `${e[0].$y}-${(e[0].$M + 1) < 10 ? "0" + (e[0].$M + 1) : (e[0].$M + 1)}-${(e[0].$D) < 10 ? "0" + (e[0].$D) : (e[0].$D)}`;
        const endTime = `${e[1].$y}-${(e[1].$M + 1) < 10 ? "0" + (e[1].$M + 1) : (e[1].$M + 1)}-${(e[1].$D) < 10 ? "0" + (e[1].$D) : (e[1].$D)}`;
        // console.log(`${e[1].$y}-${(e[1].$M+1}-${e[1].$D}`);

        setPlacement(`${startTime},${endTime}`);
        // getStatistics(`${startTime},${endTime}`)
    };
    const searchTime = () => {
        if (placement !== "") {

            getStatistics(placement)
        }
    }
    // 订单统计 end***************************************
    const option = {
        title: {
            text: 'Stacked Line'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['Email', 'Union Ads', 'Video Ads',]
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410]
            },

        ]
    };

    useEffect(() => {
        getsales()// 
        getoperating()//经营数据

        getStatistics(day)// 三角
    }, [])







    return (
        <>
            <Row gutter={20}>
                <Col className="colbottom" xs={24} sm={24} md={12} lg={6} xl={6}>
                    <Flex className="whitebg fourdiv" vertical={true} justify="space-between">
                        <Flex justify="space-between">
                            <div>昨日订单数量</div>
                            <Badge count={"昨日"}></Badge>
                        </Flex>
                        <h1>{sales.yesterdayOrderNum}</h1>
                        <Divider></Divider>
                        <Flex justify="space-between">
                            <section>环比</section>
                            <section>{sales.yesterdayOrderNumRatio}</section>
                        </Flex>
                    </Flex>
                </Col>
                <Col className="colbottom" xs={24} sm={24} md={12} lg={6} xl={6}>
                    <Flex className="whitebg fourdiv" vertical={true} justify="space-between">
                        <Flex justify="space-between">
                            <div>本月订单数量</div>
                            <Badge count={"本月"}></Badge>
                        </Flex>
                        <h1>{sales.monthOrderNum}</h1>
                        <Divider></Divider>
                        <Flex justify="space-between">
                            <section>昨日数据</section>
                            <section>{sales.monthOrderNumRatio}</section>
                        </Flex>
                    </Flex>
                </Col>
                <Col className="colbottom" xs={24} sm={24} md={12} lg={6} xl={6}>
                    <Flex className="whitebg fourdiv" vertical={true} justify="space-between">
                        <Flex justify="space-between">
                            <div>昨日支付金额</div>
                            <Badge count={"昨日"}></Badge>
                        </Flex>
                        <h1>{sales.yesterdayOrderSales}</h1>
                        <Divider></Divider>
                        <Flex justify="space-between">
                            <section>昨日数据</section>
                            <section>{sales.yesterdayOrderSalesRatio}</section>
                        </Flex>
                    </Flex>
                </Col>
                <Col className="colbottom" xs={24} sm={24} md={12} lg={6} xl={6}>
                    <Flex className="whitebg fourdiv" vertical={true} justify="space-between">
                        <Flex justify="space-between">
                            <div>本月订单金额</div>
                            <Badge count={"本月"}></Badge>
                        </Flex>
                        <h1>{sales.monthOrderSales}</h1>
                        <Divider></Divider>
                        <Flex justify="space-between">
                            <section>昨日数据</section>
                            <section>{sales.monthOrderSalesRatio}</section>
                        </Flex>
                    </Flex>
                </Col>
            </Row>

            <Row gutter={20}>
                <Col className="colbottom" xs={24} sm={24} md={24} lg={24} xl={24}>
                    <section className="whitebg">
                        <Flex justify="space-between">
                            <h3>订单统计</h3>
                            <Radio.Group
                                value={day}
                                onChange={onChange}
                                style={{
                                    marginBottom: 16,
                                }}
                            >
                                <Radio.Button value="yesterday">昨天</Radio.Button>
                                <Radio.Button value="lately7">近七天</Radio.Button>
                                <Radio.Button value="lately30">近30天</Radio.Button>
                            </Radio.Group>

                            <RangePicker onChange={(e) => onChangetime(e)} />

                            <Button onClick={() => searchTime()} type="primary">搜索</Button>

                        </Flex>


                    </section>

                </Col>
            </Row>
             <div className="whitebg">
             <Row gutter={20} >
                <Col className="flexitem" xs={24}  sm={24} md={4} lg={4} xl={4}>
                    <Flex >
                        <div className="pic pic2">图标</div>
                        <div>
                            <span>营业额</span>
                            <Flex align="center" justify="space-between">
                                <h1>{dayobj.turnover}</h1>
                                <h5>{dayobj.turnoverRatio}</h5>
                            </Flex>
                        </div>
                    </Flex>

                </Col>
                <Col className="flexitem" xs={24} sm={24} md={4} lg={4} xl={4}>
                  
                        <Flex>
                            <div className="pic pic2">图标</div>
                            <div>
                                <div>商品支付金额</div>
                                <Flex align="center" justify="space-between">
                                    <h1>{dayobj.turnover}</h1>
                                    <h5>{dayobj.turnoverRatio}</h5>
                                </Flex>
                            </div>
                        </Flex>
                    


                </Col>
                <Col className="flexitem" xs={24} sm={24} md={4} lg={4} xl={4}>
                    <Flex >
                        <div className="pic pic2">图标</div>
                        <div>
                            <span>充值金额</span>
                            <Flex align="center" justify="space-between">
                                <h1>{dayobj.turnover}</h1>
                                <h5>{dayobj.turnoverRatio}</h5>
                            </Flex>
                        </div>
                    </Flex>



                </Col>
                <Col  className="flexitem" xs={24} sm={24} md={4} lg={4} xl={4}>
                    <Flex>
                        <div className="pic pic2">图标</div>
                        <div>
                            <span>支出金额</span>
                            <Flex align="center" justify="space-between">
                                <h1>{dayobj.turnover}</h1>
                                <h5>{dayobj.turnoverRatio}</h5>
                            </Flex>
                        </div>
                    </Flex>




                </Col>
                <Col  className="flexitem" xs={24} sm={24} md={4} lg={4} xl={4}>
                    <Flex>
                        <div className="pic pic2">图标</div>
                        <div>
                            <span>余额支付金额</span>
                            <Flex align="center" justify="space-between">
                                <h1>{dayobj.turnover}</h1>
                                <h5>{dayobj.turnoverRatio}</h5>
                            </Flex>
                        </div>
                    </Flex>





                </Col>
                <Col className="flexitem" xs={24} sm={24} md={4} lg={4} xl={4}>
                    <Flex >
                        <div className="pic pic2">图标</div>
                        <div>
                            <span>支付佣金金额</span>
                            <Flex align="center" justify="space-between">
                                <h1>{dayobj.turnover}</h1>
                                <h5>{dayobj.turnoverRatio}</h5>
                            </Flex>
                        </div>
                    </Flex>






                </Col>
                <Col className="flexitem" xs={24} sm={24} md={4} lg={4} xl={4}>
                    <Flex >
                        <div className="pic pic2">图标</div>
                        <div>
                            <span>商品退款金额</span>
                            <Flex align="center" justify="space-between">
                                <h1>{dayobj.turnover}</h1>
                                <h5>{dayobj.turnoverRatio}</h5>
                            </Flex>
                        </div>
                    </Flex>
                </Col>
            </Row>
             </div>
            

            <section className="whitebg" style={{ height: "400px" }}>
                    用户统计
                    <AutoChart option={option}></AutoChart>
                </section>
        </>

    );
}

export default Console;